﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width:200px;
            height:200px;
            margin:100px auto;
            background:dodgerblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <script>
        var box = document.querySelector('.box');
        document.body.onclick = function(){
            alert(123);
        }
        box.onclick = function(e){
            var e = eventUtil.getEvent(e);
            pageX = eventUtil.getPageX(e);
            pageY = eventUtil.getPageY(e);
            target = eventUtil.getTarget(e);
            eventUtil.stopPropagation(e);
            console.log(pageX);
            console.log(pageY);
            console.log(target);
        };

        //事件兼容解决包
        var eventUtil = {
            //事件对象
            getEvent : function(e){
                return e || windon.e;
            },
            //事件在到整个页面左侧距离
            getPageX : function(e){
                return e.pageX || e.clientX + scroll().left;
            },
            //事件到整个页面上方距离
            getPageY : function(e){
                return e.pageY || e.clientY + scroll().top;
            },
            //事件源
            getTarget : function(e){
                return e.target || e.srcElement;
            },
            //阻止冒泡
            stopPropagation : function(e){
                if(e.stopPropagation){
                    e.stopPropagation();
                }else {
                    e.cancelBubble = true;
                }
            }
        };
        //页面当前滚动位置
        function scroll(){
            return {
                top:pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
                left:pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft ||0
            }
        }

    </script>
</body>
</html>